<template>
  <FilterFrom :list="filterFromDataList" @handleFilter='fetchData' v-if="!isHideSearch" />
  <div class="p-2 pt-2 table-container">
    <div class="mb-1 h-12 flex items-center justify-between table-top">
      <span class="ml-2 text-lg font-bold">{{ title }}</span>
      <div class="flex items-center">
        <slot name="topTools"></slot>
        <TableTopTool class="ml-3" v-model:tableSize="tableSize" v-model:isHideSearch="isHideSearch"
          @refresh="refreshData" />
      </div>
    </div>
    <h-load-mask :show="isGetting">
      <el-table empty-text="暂无数据" border :data="outTableData" class="h-custom-table w-full" :size="tableSize">
        <template v-for="item in columns" :key="item.index">
          <el-table-column :fixed="item.fixed" :prop="item.index" :label="item.name" :width="item.width" align="center">
            <template #default="scope" v-if="item.customRender">
              <component :is="item.customRender(scope)"></component>
            </template>
            <template #default="scope" v-else-if="item.index === 'TOOL'">
              <div class="flex items-center justify-center text-xs tool">
                <div class="theme mr-2 ml-2 cursor-pointer" v-for="tool in item.actions!(scope)" :key="tool.text"
                  @click="tool.onClick">
                  <span v-if="!tool.popConfirm" @click="tool.onClick">{{ tool.text }}</span>
                  <div v-else>
                    <h-popcomfirm placement="left" title="确认删除？删除后不可恢复。" @confirm="tool.popConfirm.onConfirm">
                      <template #reference>
                        <div>{{ tool.text }}</div>
                      </template>
                      <template #actions="{ confirm, cancel }">
                        <h-button plain size="small" @click="cancel">取消</h-button>
                        <h-button size="small" @click="confirm">删除</h-button>
                      </template>
                    </h-popcomfirm>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </h-load-mask>
    <div class="flex justify-end mt-5">
      <h-pagination v-model="pageOptions.currentPage" v-model:pageSize="pageOptions.pageSize"
        :total="pageOptions.total" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import FilterFrom from './src/components/filterFrom.vue'
import TableTopTool from './src/components/tableTopTool.vue'
import { useTableData, hTableProps, useTableStyle } from './src/hooks/'
const props = defineProps(hTableProps)
const {
  isGetting,
  pageOptions,
  outTableData,
  filterFromDataList,
  fetchData,
  refreshData } = useTableData(props.requestMethod!, props.columns!)
const {
  tableSize,
  isHideSearch,
  tableShadowColor } = useTableStyle()
defineExpose({
  refresh: fetchData
})
</script>

<style lang="less" scoped>
.h-custom-table {
  --el-table-header-bg-color: var(--border-color);
  --el-table-header-text-color: var(--main-text-color);
  --el-table-bg-color: var(--main-bg-color);
  --el-table-text-color: var(--main-text-color);
  --el-table-tr-bg-color: var(--table-bg-color);
  --el-table-border-color: var(--border-color);
  --el-table-row-hover-bg-color: var(--border-color);
  --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(v-bind('tableShadowColor'), 0.2);
}

.table-container {
  background-color: var(--head-tab-bg-color);
}

.tool {
  color: var(--theme-color);
}
</style>